[vue]vue中token的使用

使用vuex与sessionStorage结合存储token
state代码：

var state = {
 token:window.sessionStorage.getItem("token")?window.sessionStorage.getItem("token"):""};

getters代码：

var getters = {
  getToken(state){
    if(state.isLogin){
      return state.token;
    }else{
      return "";
    }
  }
}

actions代码：

//定义action,要执行的操作，如流程判断，异步请求等
var actions={
  setToken({commit},token){
   commit('SetToken',token);  //与mutations里的名称对应
  }
}

mutations代码：

//处理状态的改变
var mutations={
  SetToken(state,token){  //设置token
    state.token = token;
    window.sessionStorage.setItem("token",token);
  }
}

1.登录第一次获取token

this.$axios.post("/user/login",
  {
    userName:this.username,
    userPwd:this.pwd
  }).then((res)=>{
       var token = res.data.data;
       this.$store.dispatch('setToken',res.data.data);//设置token
       this.$route.push("/home");
  })

2.之后每次请求都要提交token

// 拦截Axios发起的所有请求，给请求添加token
Axios.interceptors.request.use(
  config => {
    vm.$store.dispatch('loadingStart'); // 显示loading组件
    if (store.getters.getToken) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
       config.headers['Authorization'] = store.getters.getToken;
    }else{
       config.headers['Authorization'] = '';
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

3.每次响应回来都要重新token

Axios.interceptors.response.use((config)=>{
  vm.$store.dispatch('loadingEnd');
  if(config.data.token){
    vm.$store.dispatch('setToken',config.data.token);
  }
  return config
})

Q:刷新页面怎么办？
A:刷新页面，vuex会初始化，但是我们初始化先判断的是sessionStorage的token是否存在，存在则将sessionStorage的token进行记取，解决了vuex刷新后更新的问题。
注：token的修改与sessionStorage的token值一定要操作同步

原创文章，转载请出处：
bug收集
网址：http://bugshouji.com/shareweb/t1034